<template>
  <div class="search-result-container">
    <!-- 搜索结果标题 -->
    <h2>搜索结果: "{{ searchKeyword }}"</h2>

    <!-- 宠物搜索结果 -->
    <div class="pet-results" v-if="pets.length > 0">
      <h3>宠物百科</h3>
      <el-row :gutter="20">
        <el-col :span="6" v-for="pet in pets" :key="pet.id">
          <el-card class="pet-card" shadow="hover" @click="openPetDetail(pet.id)">
            <el-image :src="pet.imgPath" fit="cover" class="pet-image"></el-image>
            <div class="pet-name">{{ pet.全名 }}</div>
          </el-card>
        </el-col>
      </el-row>
      
    </div>
    <el-empty v-else description="未找到相关宠物"></el-empty>

    <!-- 文章搜索结果 -->
    <div class="article-results" v-if="articles.length > 0">
      <h3>相关文章</h3>
      <el-card v-for="article in articles" :key="article.id" class="article-card" @click="openArticle(article.id)">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-image :src="article.img" fit="cover" class="article-image"></el-image>
          </el-col>
          <el-col :span="18">
            <h4>{{ article.title }}</h4>
            <p class="article-content">{{ article.content }}</p>
            <div class="article-meta">
              <span><el-icon><Timer /></el-icon> {{ article.date }}</span>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </div>
    <el-empty v-else description="未找到相关文章"></el-empty>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Timer } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { searchPets, searchArticles } from '@/api/search'
import { getimage } from '@/api/image';


const route = useRoute()
const router = useRouter()

const searchKeyword = ref('')
const pets = ref([])
const articles = ref([])


// 获取搜索结果
const fetchSearchResults = async () => {
  try {
    // 获取宠物搜索结果
    const petsResponse = await searchPets(searchKeyword.value)
    pets.value = petsResponse.data.data || []
    // 获取图片
    // 循环处理每个宠物的图片路径
    for (let pet of pets.value) {
      pet.imgPath = await getimage(pet.imgPath);
    }
    console.log('搜索结果：', pets.value)
    
    // 获取文章搜索结果
    const articlesResponse = await searchArticles(searchKeyword.value)
    articles.value = articlesResponse.data.data || []
    // 获取图片
    // 循环处理每篇文章的图片路径
    for (let article of articles.value) {
      article.img = await getimage(article.img);
    }
    console.log('搜索结果：', articles.value)

  } catch (error) {
    console.error('搜索失败：', error)
    ElMessage.error('搜索失败，请稍后重试')
  }
}

// 打开宠物详情页
const openPetDetail = (id) => {
  router.push(`/Baike/${id}`)
}

// 打开文章详情页
const openArticle = (id) => {
  router.push(`/article/${id}`)
}

watch(
  () => route.query.keyword,
  (newKeyword) => {
    if (newKeyword) {
      searchKeyword.value = newKeyword
      fetchSearchResults()
    }
  }
)

onMounted(() => {
  searchKeyword.value = route.query.keyword || ''
  if (searchKeyword.value) {
    fetchSearchResults()
  }
})
</script>

<style scoped>
.search-result-container {
  padding: 20px;
}

.pet-results, .article-results {
  margin-top: 20px;
}

.pet-card {
  margin-bottom: 20px;
  cursor: pointer;
  transition: transform 0.3s;
}

.pet-card:hover {
  transform: translateY(-5px);
}

.pet-image {
  height: 200px;
  width: 100%;
  object-fit: cover;
}

.pet-name {
  text-align: center;
  margin-top: 10px;
  font-size: 16px;
}

.article-card {
  margin-bottom: 20px;
  cursor: pointer;
}

.article-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.article-image {
  width: 100%;
  height: 120px;
  object-fit: cover;
}

.article-content {
  color: #666;
  margin: 10px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-meta {
  color: #999;
  font-size: 14px;
}
.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style>